<script setup>
    import { onScopeDispose } from 'vue';
import Demo26 from './Demo26.vue'
import Demo27 from './Demo27.vue'
import Demo28 from './Demo28.vue'
import Demo29 from './Demo29.vue'
</script>
<template>
 <Demo29/>
<h1>插槽</h1>
<button>提交</button>
<Demo26>提交</Demo26>
    <!-- template 不是实体容器 是专门用来承载插槽标识的
     v-slot 插槽名称，可以把插槽名称替换为#
     如果插槽组件中的slot 没有进行命名，默认的name="default"
     -->
 <!-- <Demo27>

     <template v-slot:default>
        调用默认占位
     </template>
    <template v-slot:top>
        <p>sdsddsdsd</p>
    </template>
        <template #left>
        <p>左边</p>
    </template>
        <template #right>
        <p>右边</p>
    </template>
</Demo27> -->
<Demo28 v-slot="scope">
    <!-- 1.通过传入新参的方式 -->
     {{ scope.msg}}
     {{scope.msg.name}}
</Demo28>
<!-- 2.可以直接接受数据 -->
 <Demo28 v-slot="{msg}">
    {{msg}}
    {{msg.name}}
 </Demo28>
 <!-- 具名插槽-形参方式 -->
  <Demo28 #default="scope">
    {{scope.msg}}
    {{scope.msg.name}}
  </Demo28>
   <!-- 具名插槽- -->
  <Demo28 #default="{scope}">
    {{scope.msg}}
    {{scope.msg.name}}
  </Demo28>
  <Demo29>
    
  </Demo29>
</template>
<style scoped>

</style>